import React, { useState, useEffect } from 'react';
import {connect} from 'react-redux';
import Proptypes from 'prop-types';
import {
    Button, Picker, List, Modal, NavBar, SwipeAction,
    Card, InputItem, Icon, Toast, TextareaItem,
} from 'antd-mobile';

import {reqPushjoblist, reqAddjob, reqRmjob} from './../api';
import addIcon from './../assets/img/add.svg';

const jingyanZone = [
    {
        label:'经验不限', value:'经验不限'
    }, {
        label:'1-3年', value:'1-3年'
    }, {
        label:'3-5年', value:'3-5年'
    }, {
        label:'5年以上', value:'5年以上'
    },
]

function Pushjob(props) {
    const [_modal, setModal] = useState(false);
    const [_data, setData] = useState([]);
    const [job, setJob] = useState('');
    const [jingyan, setJingyan] = useState(['经验不限']);
    const [salary, setSalary] = useState('');
    const [skill, setSkill] = useState('');
    const [yaoqiu, setYaoqiu] = useState('');

    useEffect(async ()=>{
        let params = {user_id: props.user._id};
        let {data:{data}} = await reqPushjoblist(params);
        setData(data);
    },[props.user])

    const onClose = () => {
        setModal(false)
    }

    const handlePush = async () => {

        let invalid = [job,salary,jingyan[0],skill,yaoqiu].some(d=>d==='');

        if(invalid){
            Toast.fail('请输入完整信息',1);
        }else{
            let {data:{data, code}} = await reqAddjob({job, jingyan:jingyan[0], salary, skill, yaoqiu, user_id:props.user._id});
            if(code===0){
                _data.push(data);
                setData(_data);
                Toast.success('发布职位成功',1, ()=>{
                    //清空表单
                    [setJob, setJingyan, setSalary, setSkill, setYaoqiu].map(func=>{
                        setJingyan === func? func(['经验不限']): func('')
                    });
                    //关闭模态窗
                    onClose();
                });

            }else{
                Toast.fail('发布职位失败',1)
            }


        }

    }

    const handleDelete = async (_id)=>{

        let {data:{code, data, msg}} = await reqRmjob(_id);
        if(code===0){
            let new_data = _data.filter(d=>d._id !== data._id);
            setData(new_data)
            Toast.success(msg,1)
        }else{
            Toast.fail('删除失败',1)
        }


    }
    return (
        <div>
            <NavBar mode="dark" icon={<Icon type="left" />}
                    onLeftClick={() => props.history.replace('/home/my')}
                    rightContent={<img src={addIcon} alt="" onClick={()=>setModal(true)}/>}
            >职位管理</NavBar>
            <List style={{height:'calc(100vh - 45px)', overflow:'auto'}}>
        {
            _data.map(d=>(
                <SwipeAction
                    key={d._id}
                    style={{marginBottom:'5px'}}
                    autoClose
                    right={[
                        {
                            text: '删除',
                            onPress: () => Modal.alert('删除', '确定删除该职位？', [
                                { text: '取消' },
                                { text: '确定', onPress: () => handleDelete(d._id) },
                            ]),
                            style: { backgroundColor: '#F4333C', color: 'white' },
                        },
                    ]}
                >
                    <Card>
                        <Card.Header
                            title={d.job}
                            extra={<span style={{color:'#64bfbb'}}>{d.salary}</span>}
                        />
                        <Card.Body>
                            <p>{d.jingyan}</p>
                            <p>{d.skill.join()}</p>
                        </Card.Body>
                    </Card>
                </SwipeAction>
            ))
        }

            </List>
            <Modal
                popup
                visible={_modal}
                onClose={onClose}
                animationType="slide-up"
            >
                <List renderHeader={() => <div>添加新职位</div>} >
                    <InputItem value={job} onChange={val =>setJob(val)}
                               placeholder="比如web前端工程师"
                    >招聘岗位</InputItem>
                    <Picker data={jingyanZone} value={jingyan} cols={1} onChange={val =>setJingyan(val)} >
                        <List.Item>职位经验</List.Item>
                    </Picker>
                    <InputItem value={salary} onChange={val =>setSalary(val)}
                    placeholder="比如7k, 7-12k"
                    >职位薪资</InputItem>
                    <InputItem value={skill} placeholder="vue,react" onChange={val => setSkill(val)}>职位技能</InputItem>
                    <TextareaItem
                        title="职位要求"
                        value={yaoqiu}
                        onChange={val => setYaoqiu(val)}
                        placeholder="精通vue和react框架..."
                        autoHeight
                    />
                    <List.Item>
                        <Button type="primary" onClick={handlePush}>发布新职位</Button>
                    </List.Item>
                </List>
            </Modal>
        </div>
    )

}
Pushjob.propTypes = {
    user: Proptypes.object.isRequired
}
export default connect(
    state => ({
        user: state.user
    }),
    {}
)(Pushjob)